<template>
  <div class="app-container">
    <div class="sidebar">
      <div class="logo">
        <el-icon class="logo-icon">
          <ChatDotRound/>
        </el-icon>
        <span class="logo-text">金刚侠客</span>
      </div>
      <div class="sidebar-menu">
        <div 
          class="menu-item" 
          :class="{ active: currentView === 'chat' }"
          @click="switchView('chat')"
        >
          <el-icon><ChatDotRound/></el-icon>
          <span class="menu-text">对话</span>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: currentView === 'examples' }"
          @click="switchView('examples')"
        >
          <el-icon><VideoPlay/></el-icon>
          <span class="menu-text">示例</span>
        </div>
        <div 
          class="menu-item" 
          :class="{ active: currentView === 'settings' }"
          @click="switchView('settings')"
        >
          <el-icon><Setting/></el-icon>
          <span class="menu-text">设置</span>
        </div>
      </div>
      <div class="sidebar-footer">
        <div class="menu-item" @click="handleReset">
          <el-icon><Refresh/></el-icon>
          <span class="menu-text">重置</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <div v-if="currentView === 'chat'" class="chat-container">
        <div class="chat-header">
          <div class="system-prompt">
            <el-input
                v-model="systemPrompt"
                type="textarea"
                :rows="2"
                placeholder="设置AI助手的角色和行为方式..."
                class="system-prompt-input"
            />
          </div>
        </div>
        <div class="chat-box" ref="chatBox">
          <div v-if="messages.length === 0" class="empty-state">
            <div class="ai-avatar">
              <el-icon>
                <ChatDotRound/>
              </el-icon>
            </div>
            <h2>我是金刚侠客，很高兴见到你!</h2>
            <p>我可以帮你写代码、读文件、写作和回答问题，满足你的任务交给我吧~</p>
            <div class="quick-actions">
              <div class="quick-action-item">
                <h3>代码助手</h3>
                <p>帮你编写、解释和优化代码</p>
              </div>
              <div class="quick-action-item">
                <h3>文档助手</h3>
                <p>帮你撰写和编辑各类文档</p>
              </div>
              <div class="quick-action-item">
                <h3>问答助手</h3>
                <p>回答你的各种问题</p>
              </div>
            </div>
          </div>
          <div v-for="(message, index) in messages" :key="index" class="message" :class="message.type">
            <div class="message-avatar" v-if="message.type === 'ai'">
              <el-icon>
                <ChatDotRound/>
              </el-icon>
            </div>
            <div class="message-avatar user-avatar" v-else>
              <el-icon>
                <User/>
              </el-icon>
            </div>
            <div class="message-bubble">
              <div class="message-content" v-if="message.type === 'user'">{{ message.content }}</div>
              <div class="message-content typing" v-else v-html="message.displayContent">
              </div>
              <div class="message-time">{{ message.time }}</div>
            </div>
          </div>
        </div>
        <div class="input-area">
          <el-input
              v-model="inputMessage"
              placeholder="输入消息，按Enter发送..."
              @keyup.enter="sendMessage"
              :disabled="loading || isTyping"
              class="message-input"
          >
            <template #prefix>
              <el-icon>
                <ChatDotRound/>
              </el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="sendMessage" :loading="loading" :disabled="isTyping" class="send-button">
            <el-icon>
              <Position/>
            </el-icon>
            发送
          </el-button>
        </div>
      </div>
      <div v-else-if="currentView === 'examples'" class="examples-container">
        <h2>常用示例</h2>
        <div class="examples-grid">
          <div 
            v-for="(example, index) in examples" 
            :key="index" 
            class="example-card"
            @click="useExample(example)"
          >
            <el-icon class="example-icon" :size="24">
              <component :is="example.icon" />
            </el-icon>
            <h3>{{ example.title }}</h3>
            <p>{{ example.description }}</p>
          </div>
        </div>
      </div>
      <div v-else-if="currentView === 'settings'" class="settings-container">
        <h2>设置</h2>
        <div class="settings-section">
          <h3>基本设置</h3>
          <div class="setting-item">
            <span>打字速度</span>
            <el-slider 
              v-model="typingSpeed" 
              :min="100" 
              :max="2000" 
              :step="100"
              show-stops
            />
          </div>
          <div class="setting-item">
            <span>深色模式</span>
            <el-switch v-model="darkMode" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      messages: [],
      inputMessage: '',
      systemPrompt: '',
      loading: false,
      isTyping: false,
      typingSpeed: 1000,
      currentView: 'chat',
      darkMode: false,
      examples: [
        {
          icon: 'Document',
          title: '编写文档',
          description: '帮助你编写各类文档、报告和说明',
          prompt: '请帮我写一份项目周报模板'
        },
        {
          icon: 'Monitor',
          title: '代码示例',
          description: '生成各类编程语言的代码示例',
          prompt: '请用Java写一个简单的REST API示例'
        },
        {
          icon: 'ChatDotRound',
          title: '文本优化',
          description: '优化和改进文本内容',
          prompt: '请帮我优化以下文本的表达...'
        },
        {
          icon: 'Edit',
          title: '创意写作',
          description: '帮助你进行创意写作',
          prompt: '请帮我写一个短小的科幻故事'
        }
      ]
    }
  },
  methods: {
    async sendMessage() {
      if (!this.inputMessage.trim()) return

      const userMessage = this.inputMessage
      const currentTime = new Date().toLocaleTimeString()
      this.messages.push({type: 'user', content: userMessage, time: currentTime})
      this.inputMessage = ''
      this.loading = true
      const aiMessage = {
        type: 'ai',
        content: '',
        displayContent: '',
        time: new Date().toLocaleTimeString(),
        isTyping: true
      }
      this.messages.push(aiMessage)
      this.isTyping = true
      // 分批处理文本，每次只处理一个字符
      // 直接显示接收到的文本，无需缓冲
      try {
        // 先更新系统提示
        await fetch('/api/updateSystemPrompt', {
          method: 'POST',
          headers: {
            'Content-Type': 'text/plain'
          },
          body: this.systemPrompt
        })


        const eventSource = new EventSource(`/api/chat/stream/${encodeURIComponent(userMessage)}`)
        let buffer = ''
        let isConnectionClosed = false
        // 创建一个队列来存储接收到的文本块，确保按顺序处理
        let chunkQueue = []
        let isProcessing = false

        // 处理队列中的文本块
        const processChunkQueue = async () => {
          if (isProcessing || chunkQueue.length === 0) return

          isProcessing = true
          const chunk = chunkQueue.shift()
          await this.typeText(aiMessage, chunk)
          isProcessing = false

          // 处理队列中的下一个文本块
          processChunkQueue()
        }

        eventSource.onmessage = async (event) => {
          if (isConnectionClosed) return

          const text = event.data

          if (text === '[DONE]') {
            isConnectionClosed = true
            eventSource.close()
            aiMessage.isTyping = false
            this.isTyping = false
            return
          }

          buffer += text

          // 将接收到的文本块添加到队列中
          chunkQueue.push(text)

          // 如果当前没有正在处理的文本块，则开始处理队列
          if (!isProcessing) {
            processChunkQueue()
          }
        }

        eventSource.onerror = (error) => {
          console.error('EventSource错误:', error)
          if (!isConnectionClosed) {
            isConnectionClosed = true
            eventSource.close()
            if (buffer) {
              // 如果缓冲区还有未处理的文本，作为最后的内容显示
              aiMessage.content = buffer
              aiMessage.displayContent = buffer
              aiMessage.isTyping = false
              this.isTyping = false
            } else {
              // 添加错误提示消息
              this.messages.push({
                type: 'error',
                content: '连接出错，请重试',
                displayContent: '连接出错，请重试',
                time: new Date().toLocaleTimeString(),
                isTyping: false
              })
            }
          }
        }
      } catch (error) {
        console.error('发送消息失败:', error)
        this.messages.push({
          type: 'error',
          content: '发送消息失败，请重试',
          displayContent: '发送消息失败，请重试',
          time: new Date().toLocaleTimeString(),
          isTyping: false
        })
      } finally {
        this.loading = false
      }
    },
    scrollToBottom() {
      const chatBox = this.$refs.chatBox
      chatBox.scrollTop = chatBox.scrollHeight
    },
    typeText(aiMessage, chunk) {
      return new Promise(resolve => {
        console.log('chunk:', chunk)

        // 检查是否包含代码块 (``` ```)
        const codeBlockRegex = /```([\w]*)\n([\s\S]*?)```/g
        let processedChunk = chunk
        let codeBlocks = []
        let match

        // 先提取所有代码块并替换为占位符
        while ((match = codeBlockRegex.exec(chunk)) !== null) {
          const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`
          codeBlocks.push({
            language: match[1] || 'plaintext',
            code: match[2].trim()
          })
          processedChunk = processedChunk.replace(match[0], placeholder)
        }

        // 处理标题 - 将 ### 格式转换为 Markdown h1-h6 格式
        processedChunk = processedChunk
          // 处理 ### 格式的标题（完整捕获整行内容）
          .replace(/(^|\n)\s*(#{1,6})\s*(.*?)(?=\n|$)/g, (match, newline, hashes, title) => {
            const level = hashes.length;
            // 直接返回转换后的标题，不保留原始的 ### 
            return `${newline || ''}<h${level}>${title.trim()}</h${level}>`;
          })
          // 处理加粗文本，确保不换行
          .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
          // 处理行内代码
          .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>')
          // 移除任何可能残留的 ### 标记（以防万一）
          .replace(/^###\s*/gm, '')

        // 还原代码块，添加复制按钮
        codeBlocks.forEach((block, index) => {
          const placeholder = `__CODE_BLOCK_${index}__`
          const codeHtml = `
<div class="code-block-wrapper">
  <div class="code-block-header">
    <span class="language-label">${block.language}</span>
    <button class="copy-button" onclick="navigator.clipboard.writeText(\`${block.code.replace(/`/g, '\\`')}\`)">
      <el-icon><Document /></el-icon>
      复制代码
    </button>
  </div>
  <pre class="code-block"><code class="language-${block.language}">${block.code}</code></pre>
</div>`
          processedChunk = processedChunk.replace(placeholder, codeHtml)
        })

        const chars = processedChunk.split('')
        let currentIndex = 0

        const displayNextChar = () => {
          if (currentIndex < chars.length) {
            aiMessage.content += chars[currentIndex]
            aiMessage.displayContent = aiMessage.content
                // 处理标题格式
                .replace(/(^|\n)\s*(#{1,6})\s*(.*?)(?=\n|$)/g, (match, newline, hashes, title) => {
                    const level = hashes.length;
                    return `${newline || ''}<h${level}>${title.trim()}</h${level}>`;
                })
                // 移除任何残留的 ### 标记
                .replace(/^###\s*/gm, '')
                // 处理其他格式
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                .replace(/\n/g, '<br>')

            currentIndex++
            this.$nextTick(() => {
              this.scrollToBottom()
              setTimeout(displayNextChar, this.typingSpeed / 100)
            })
            this.$forceUpdate()
          } else {
            resolve()
          }
        }
        displayNextChar()
      })
    },
    switchView(view) {
      this.currentView = view
    },
    useExample(example) {
      this.currentView = 'chat'
      this.inputMessage = example.prompt
      this.$nextTick(() => {
        this.sendMessage()
      })
    },
    handleReset() {
      this.$confirm('确定要重置所有对话记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.messages = []
        this.systemPrompt = ''
        this.$message({
          type: 'success',
          message: '重置成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置'
        })
      })
    }
  },
  watch: {
    darkMode: {
      handler(newVal) {
        document.documentElement.classList.toggle('dark', newVal)
        localStorage.setItem('darkMode', newVal)
      }
    }
  },
  mounted() {
    // 恢复深色模式设置
    const savedDarkMode = localStorage.getItem('darkMode')
    if (savedDarkMode !== null) {
      this.darkMode = JSON.parse(savedDarkMode)
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.app-container {
  display: flex;
  height: 100vh;
  background-color: #f9fafb;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  border-right: 1px solid #e6e8eb;
  transition: width 0.3s;
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
}

.logo-icon {
  font-size: 24px;
  color: #4e6ef2;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
  flex: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.menu-item:hover {
  background-color: #f5f7fa;
}

.menu-item.active {
  background-color: #eef3ff;
}

.menu-item.active .el-icon {
  color: #4e6ef2;
}

.menu-item.active .menu-text {
  color: #4e6ef2;
  font-weight: 500;
}

.menu-item .el-icon {
  font-size: 18px;
  color: #606266;
  margin-right: 12px;
}

.menu-text {
  font-size: 14px;
  color: #606266;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0 12px 20px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 0;
  overflow: hidden;
}

.chat-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.chat-box {
  flex: 1;
  border-radius: 12px;
  padding: 30px;
  overflow-y: auto;
  margin-bottom: 100px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.chat-header {
  margin-bottom: 20px;
}

h1 {
  text-align: center;
  color: #4e6ef2;
  margin-bottom: 30px;
  font-weight: 500;
}

/* 系统提示区域 */
.system-prompt {
  margin-bottom: 30px;
}

.system-prompt-input {
  border-radius: 8px;
}

/* 聊天框 */
.chat-box {
  flex: 1;
  border-radius: 12px;
  padding: 30px;
  overflow-y: auto;
  margin-bottom: 30px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #606266;
  text-align: center;
}

.ai-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #4e6ef2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ai-avatar .el-icon {
  font-size: 30px;
  color: white;
}

.empty-state h2 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 500;
}

.empty-state p {
  font-size: 16px;
  color: #909399;
  max-width: 400px;
  margin-bottom: 30px;
}

.quick-actions {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.quick-action-item {
  background-color: #f5f7fa;
  border-radius: 12px;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.quick-action-item:hover {
  background-color: #eef3ff;
  transform: translateY(-5px);
}

.quick-action-item h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #4e6ef2;
}

.quick-action-item p {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

/* 消息样式 */
.message {
  display: flex;
  margin-bottom: 30px;
  align-items: flex-start;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4e6ef2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.message-avatar .el-icon {
  font-size: 20px;
  color: white;
}

.user-avatar {
  background-color: #95a5a6;
}

.message-bubble {
  flex: 1;
  max-width: calc(100% - 60px);
}

.message-content {
  padding: 16px 20px;
  border-radius: 12px;
  word-wrap: break-word;
  line-height: 1.6;
  font-size: 15px;

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
    font-weight: bold;
  }

  h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
    font-weight: bold;
  }

  h3 {
    font-size: 1.17em;
    margin: 1em 0;
    font-weight: bold;
  }

  h4 {
    font-size: 1em;
    margin: 1.33em 0;
    font-weight: bold;
  }

  h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
    font-weight: bold;
  }

  h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
    font-weight: bold;
  }
}

.user .message-content {
  background-color: #4e6ef2;
  color: white;
}

.ai .message-content {
  background-color: #f5f7fa;
  color: #333;
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

/* 输入区域 */
.input-area {
  display: flex;
  gap: 16px;
  width: calc(100% - 240px);
  position: fixed;
  bottom: 30px;
  left: calc(240px + (100% - 240px) / 2);
  transform: translateX(-50%);
  max-width: 940px;
  padding: 0 20px;
  background: transparent;
  z-index: 10;
}

.message-input {
  border-radius: 24px;
  flex: 1;
  min-width: 300px;
}

.message-input :deep(.el-input__wrapper) {
  padding-left: 16px;
  border-radius: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.message-input :deep(.el-input__prefix) {
  margin-right: 8px;
}

.send-button {
  border-radius: 24px;
  padding: 0 24px;
  background-color: #4e6ef2;
  white-space: nowrap;
  min-width: 88px;
  flex-shrink: 0;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .input-area {
    width: calc(100% - 60px);
    left: calc(60px + (100% - 60px) / 2);
    padding: 0 10px;
  }

  .message-input {
    min-width: 200px;
  }
}

@media screen and (max-width: 480px) {
  .quick-action-item {
    width: 100%;
    max-width: 300px;
  }

  .chat-box {
    padding: 15px;
  }

  .send-button .el-icon + span {
    display: none;
  }

  .send-button {
    padding: 0 12px;
    min-width: 44px;
  }
}

.cursor {
  display: inline-block;
  animation: blink 1s infinite;
  font-weight: bold;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.message-content strong {
  display: inline;
  font-size: 1.1em;
  color: #333;
  margin: 0;
}

.message-content .code-block {
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  overflow-x: auto;
}

.message-content .code-block code {
  color: #d4d4d4;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
}

.message-content .inline-code {
  background-color: #f3f4f6;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  color: #e53e3e;
}

/* 针对AI消息中的代码块特殊处理 */
.ai .message-content .code-block {
  background-color: #282c34;
  border: 1px solid #3e4451;
}

.ai .message-content .inline-code {
  background-color: rgba(78, 110, 242, 0.1);
  color: #4e6ef2;
}

/* 代码块样式优化 */
.code-block-wrapper {
  margin: 16px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #1e1e1e;
  border: 1px solid #3e4451;
  position: relative;
}

.code-block-header {
  background: #2d2d2d;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3e4451;
}

.language-label {
  color: #abb2bf;
  font-size: 12px;
  font-family: 'Fira Code', monospace;
}

.copy-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #4a4a4a;
  background: transparent;
  color: #abb2bf;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.copy-button:hover {
  background: #3e4451;
  border-color: #5a5a5a;
}

.copy-button .el-icon {
  font-size: 14px;
}

.code-block {
  margin: 0;
  padding: 16px;
  background: #1e1e1e;
  overflow-x: auto;
  position: relative;
}

.code-block code {
  color: #d4d4d4;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  display: block;
}

/* 代码块复制成功提示 */
.copy-button.success {
  background: #28a745;
  border-color: #28a745;
  color: white;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
  .copy-button span {
    display: none;
  }

  .copy-button {
    padding: 4px 8px;
  }
}

/* 针对AI消息中的代码显示优化 */
.ai .message-content {
  font-size: 15px;
  line-height: 1.6;
}

.ai .message-content p {
  margin: 8px 0;
}

.ai .message-content strong {
  display: block;
  font-size: 1.1em;
  margin: 16px 0 8px;
  color: #333;
}

/* 适配深色主题 */
@media (prefers-color-scheme: dark) {
  .code-block-wrapper {
    border-color: #4a4a4a;
  }

  .code-block-header {
    background: #2d2d2d;
    border-color: #4a4a4a;
  }

  .ai .message-content strong {
    color: #e6e6e6;
  }
}

/* 示例页面样式 */
.examples-container {
  padding: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.example-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #e6e8eb;
}

.example-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #4e6ef2;
}

.example-icon {
  color: #4e6ef2;
  margin-bottom: 12px;
}

.example-card h3 {
  margin: 10px 0;
  color: #333;
}

.example-card p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 设置页面样式 */
.settings-container {
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.settings-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  border: 1px solid #e6e8eb;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item span {
  flex: 1;
  color: #333;
}

.setting-item .el-slider {
  width: 300px;
}

/* 深色模式样式 */
:root.dark {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --border-color: #333;
}

.dark .app-container {
  background-color: var(--bg-color);
}

.dark .example-card,
.dark .settings-section {
  background-color: #2a2a2a;
  border-color: var(--border-color);
}

.dark .example-card h3,
.dark .settings-container h2,
.dark .settings-container h3,
.dark .setting-item span {
  color: var(--text-color);
}

.dark .example-card p {
  color: #999;
}
</style>
